<template>
    <div class="container-fliud" id="Body-all">
        <el-row style="height:100%">
            <el-col :span="18" style="height:100%">
               <div style="height:100%">
                    <div class="grid-content bg-purple left-top">
                        <el-carousel :interval="5000" arrow="always" style="height:100%">
                            <el-carousel-item  v-for="item in ImageBox" :key="item.id"> 
                                <img :src="item.idView" width=100% height=auto> 
                            </el-carousel-item> 
                        </el-carousel> 
                     </div>
                    <div class="left-down">
                        <div class="col-xs-6 col-md-8"> 

                        </div>
                        <div class="col-xs-6 col-md-2">
                            <el-button type="primary" @click="Isgather" style="background-color: gray; border: 2px solid white;margin-top:35px" v-if="this.gather===false">围观分钱</el-button>
                            <el-button type="primary" @click="Nogather" style="background-color: gray; border: 2px solid white;margin-top:35px" v-if="this.gather">已围观</el-button>
                        </div>
                        <div class="col-xs-6 col-md-2">
                            <el-button type="primary" class="el-icon-circle-plus-outline" v-if="this.follow===false" @click="thumbs" circle style="font-size: xx-large;position: relative;top: 30px;background-color: gray; border:none;"></el-button>
                            <el-button type="primary" class="el-icon-circle-check" v-if="this.follow" @click="cancel" circle style="font-size: xx-large;position:relative;top: 30px;background-color: gray; border:none;"></el-button>
                            <el-button type="primary" class="el-icon-chat-line-round" @click="drawer" circle style="font-size: xx-large;position: relative;top: 30px;background-color: gray; border:none;"></el-button>
                        </div>
                    </div>
                </div>
                
                <div>
                    
                </div>
            </el-col>
            <el-col :span="6" style="height:100%;">
                <div class="grid-content bg-purple-light right" >
                   <div style="height:5%">
                        <h3 style="font-weight:900;font-family:'楷体'">评论</h3>
                    </div>
                    <div class="panel panel-default" style="height:85%;overflow:scroll;">
                        <div class="panel-body">
                            <div id="navbar-example">
                                <ul class="nav nav-tabs" role="tablist" style="height:200px" v-for="u in Comment" :key="u.id">
                                    <div>
                                        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" style="margin-left:-330px"></el-avatar> &nbsp;&nbsp;&nbsp;&nbsp;
                                        <span style="font-family:'楷体';font-size:large">{{u.idName}}</span>
                                    </div>
                                    <div>
                                        <span style="font-family:'楷体';font-size:small">{{u.idComment}}</span>
                                    </div>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="comment" v-if="this.hiding">
                        <el-input v-model="input" placeholder="请输入内容" style="width:80%"></el-input>
                        <el-button type="primary" @click="release">发布</el-button>
                    </div> 
                </div>
            </el-col>
        </el-row> 
    </div>
</template>

<style>
#Body-all{   
    margin: 0 auto;
    position:absolute;
    width: 100%;
    height:100%;
}
.left-top{
    height: 88%;
    background-color: #d3dce6;
}
.left-down{
    height: 12%;  
    background-color: gray
}


.right{
    position:absolute;
    height: 100%;
    overflow: scroll;
    
}

/* 走马灯 */
.el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 500px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
.el-carousel__container{
    position: relative !important;
    height: 100% !important;
    
}
/* 点赞以及关注域 */
.picture{
    width: 100px;
    height: 350px;
    opacity: 0.3;
    position: relative;
    left: 1335px;
    top: 430px;
    
}

</style>

<script>

export default{
    data(){
        return{
            ImageBox:[
                {id:1,idView:require('../assets/lvyou.jpg'),idTitle:'《画江湖之不良人》'},
                {id:2,idView:require('../assets/Bei.jpg'),idTitle:'《旅游》'},
                {id:3,idView:require('../assets/Home.jpg'),idTitle:'《画江湖之不良人4》'},
            ],  
            IdP:'',  //图片对应的ID
            gather:false,//是否围观
            input:'' , //评论区输入框;
            follow:true,  //是否关注;
            hiding:false,   //是否隐藏;
            i:0,
            Comment:[]
        }
    },
    created(){
        this.FindComment();
    },
    methods:{
        thumbs(){
            this.follow=true;
            layer.msg('关注成功', {
                time: 2000, //2s后自动关闭
            });
        },
        cancel(){
            this.follow=false;
            layer.msg('取消成功', {
                time: 2000, //2s后自动关闭
            });
        },
        //输入框的显示与隐藏;
        drawer(){
            (this.i)++;
            if((this.i)%2==1){
                this.hiding=true;
            }else{
                this.hiding=false;
            }
            
        },

        // 是否围观的方法;
        Isgather(){
            this.gather=true;
            layer.msg('围观成功', {
                time: 2000, //2s后自动关闭
            });
        },
        Nogather(){
            this.gather=false;
            layer.msg('取消围观', {
                time: 2000, //2s后自动关闭
            });
        },
        FindComment(){
            this.axios.get("http://localhost:3000/Comment").then(response=>{
                this.Comment=response.data;
            })
        },
        release(){
            this.axios.post("http://localhost:3000/Comment",{
                    "idName":"小德",
                    "idComment":this.input
                }).then(response=>{
                    this.Comment=response.data;
                    this.FindComment();
                });
        }
    }   
}
</script>
